<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环精灵图</title>
    <style>
        li {
            list-style: none;
            background-image: url(../images/精灵图.webp);
            float: left;
            width: 110px;
            height: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    var lis = document.querySelectorAll('li')
    for(var i=0;i<lis.length;i++){
        var index = i * 111
        lis[i].style.backgroundPosition = '0-'+index +'px'
    }

</script>

<!-- 
    案例 循环精灵图
因为精灵图图标有规律从上到下每个图标相隔44px且第一个图标y轴为0，依次类推，下面的图标y轴都是负数，lis[i].style.backgroundPosittion=‘0 -’+index+‘px’。第一个0是x坐标后面的封号与它有空格表示y轴的负号。用for循环遍历取出来的每个小li，每个小li安放一个图标

</html>